<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="发布房源"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <van-nav-bar
      class="fyxx"
      left-text="房源信息"
    />
    <van-nav-bar left-text="小区名称" @click-right="onClickRight">
      <template #right>
        请输入小区名称
        <van-icon name="arrow" size="18" />
      </template>
    </van-nav-bar>

    <van-nav-bar left-text="租金" right-text="￥/月">
      <template #title>
        <van-field v-model="form.price" placeholder="请输入租金/月" />
      </template>
    </van-nav-bar>

    <van-nav-bar left-text="建筑面积" right-text="㎡">
      <template #title>
        <van-field v-model="form.size" placeholder="请输入建筑面积" />
      </template>
    </van-nav-bar>

    <van-cell is-link title="户型" :value="value1" @click="show1 = true" />
    <van-popup v-model="show1" position="bottom" :style="{ height: '50%' }">
      <van-picker
        show-toolbar
        :columns="newroomType"
        @confirm="onConfirm1"
        @cancel="onCancel1"
      />
    </van-popup>

    <van-cell is-link title="所在楼层" :value="value2" @click="show2 = true" />
    <van-popup v-model="show2" position="bottom" :style="{ height: '50%' }">
      <!-- 选择器2 -->
      <van-picker
        show-toolbar
        :columns="newfloor"
        @confirm="onConfirm2"
        @cancel="onCancel2"
      />
    </van-popup>

    <van-cell is-link title="朝向" :value="value3" @click="show3 = true" />
    <van-popup v-model="show3" position="bottom" :style="{ height: '50%' }">
      <!-- 选择器3 -->
      <van-picker
        show-toolbar
        :columns="neworiented"
        @confirm="onConfirm3"
        @cancel="onCancel3"
      />
    </van-popup>

    <van-nav-bar left-text="房屋标题" />
    <input v-model="form.title" type="text" class="inp" placeholder="请输入标题(例如：整租 小区名 2室 5000元)">
    <van-nav-bar left-text="房屋图像" />
    <van-uploader v-model="fileList" :after-read="afterRead" multiple class="img" />

    <van-nav-bar left-text="房屋配置" />
    <van-grid :border="false" :column-num="5">
      <van-grid-item v-for="(item,index) in supporting" :key="index" @click="add(item,index)">
        <div :class="{active:newsupporting.includes(item.label)}">
          <input :id="item.label" v-model="newsupporting" style="display:none" type="checkbox" :name="item.label" :value="item.label">
          <label :for="item.label" class="config">
            <van-icon :name="iconArr[index]" />
            <span>{{ item.label }}</span>
          </label>
        </div>
        <!-- <van-icon name="chat-o" />
        <span>{{ item.label }}</span> -->
      </van-grid-item>
    </van-grid>

    <van-nav-bar left-text="房屋描述" />
    <textarea v-model="form.description" class="txt" rows="5" placeholder="请输入房屋描述信息" />

    <div class="box">
      <van-button class="cancel" type="default" @click="cancel">取消</van-button>
      <van-button class="confirm" type="primary" @click="sub">确认</van-button>
    </div>
  </div>
</template>

<script>
import { getrelease, gethouses, gethousesImg } from '@/api/home.js'
import { Dialog } from 'vant'
export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      value1: '请选择',
      value2: '请选择',
      value3: '请选择',
      floor: [],
      newfloor: [],
      neworiented: [],
      newroomType: [],
      oriented: [],
      roomType: [],
      supporting: [],
      newsupporting: [],
      fileList: [],
      imgsrc: [],
      form: {
        title: '',
        description: '',
        houseImg: '',
        oriented: '',
        supporting: '',
        price: '',
        roomType: '',
        size: '',
        floor: '',
        community: ''
      },
      floor2: [],
      roomType2: [],
      oriented2: [],
      iconArr: ['like-o', 'star-o', 'star-o', 'phone-o', 'setting-o', 'coupon-o', 'cart-o', 'shopping-cart-o', 'friends-o', 'comment-o']
    }
  },

  created() {
    this.getrelease()
  },

  methods: {
    onClickLeft() {
      this.$router.push('/layout/home')
    },
    onClickRight() {
      console.log(123)
      this.$router.push('/rentsearch')
    },
    async  afterRead(file) {
      // 此时可以自行将文件上传至服务器
      // console.log(file)
      const form = new FormData()
      this.fileList.forEach(item => {
        form.append('file', item.file)
      })
      const res = await gethousesImg(form)
      console.log(res.data.body)
      res.data.body.forEach(item => {
        // console.log(item)
        this.imgsrc.push(item)
      })
      // console.log(this.imgsrc.join('|'))
      this.form.houseImg = this.imgsrc.join('')
    },
    async getrelease() {
      const res = await getrelease()
      console.log(res.data.body)
      // console.log(res.data.body.floor)
      this.floor = res.data.body.floor
      this.floor.forEach(item => {
        this.newfloor.push(item.label)
      })
      this.floor.forEach(item => {
        this.floor2.push(item.value)
      })

      this.oriented = res.data.body.oriented
      this.oriented.forEach(item => {
        this.neworiented.push(item.label)
      })

      this.oriented.forEach(item => {
        this.oriented2.push(item.value)
      })

      this.roomType = res.data.body.roomType
      this.roomType.forEach(item => {
        this.newroomType.push(item.label)
      })
      this.roomType.forEach(item => {
        this.roomType2.push(item.value)
      })

      this.supporting = res.data.body.supporting
    },
    onCancel1() {
      this.show1 = false
    },
    onConfirm1(value, index) {
      console.log(value, index)
      this.value1 = value
      this.show1 = false
      // console.log(this.roomType2)
      this.form.roomType = this.roomType2[index]
    },
    onCancel2() {
      this.show2 = false
    },
    onConfirm2(value, index) {
      console.log(value, index)
      this.value2 = value
      this.show2 = false
      this.form.floor = this.floor2[index]
    },
    onCancel3() {
      this.show3 = false
    },
    onConfirm3(value, index) {
      console.log(value, index)
      this.value3 = value
      this.show3 = false
      this.form.oriented = this.oriented2[index]
    },
    async sub() {
      const res = await gethouses(this.form)
      console.log(res)
      Dialog.confirm({
        title: '提示',
        message: '房源发布成功',
        confirmButtonText: '继续发布',
        confirmButtonColor: 'blue',
        cancelButtonText: '去查看'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.push('/layout/find')
        })
    },
    add() {
      this.form.supporting = this.newsupporting.join('|')
    },
    cancel() {
      Dialog.confirm({
        title: '提示',
        message: '放弃发布房源',
        confirmButtonText: '继续编辑',
        confirmButtonColor: 'blue',
        cancelButtonText: '放弃'
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
          this.$router.push('/layout/home')
        })
    }
  }
}
</script>

<style scoped lang='less'>
.header{
.van-nav-bar{
  background-color: rgb(33, 185, 122) ;
}
/deep/.van-nav-bar__title{
  color: #fff;
}
/deep/.van-nav-bar__arrow{
  color: #fff !important;
}
}
/deep/.van-nav-bar__text{
  color: unset;
}
/deep/.fyxx{
  color: rgb(33, 185, 122) !important;
}
/deep/.van-icon-arrow{
  color: #ccc !important;
}
  .content {
    padding: 16px 16px 160px;
  }
.inp{
  width: 345.5px;
  height: 23.2px;
  margin: 15px 0 0 15px;
  padding: 2px 0;
  border: 0;
}
  .img{
    margin: 15px 0 0 15px;
  }
  .txt{
    width: 100%;
    height: 127px;
    border: 0;
    padding: 15px 0 0 15px;
  }
  .box{
    display: flex;
    .cancel{
      flex: 1;
    }
    .confirm{
      flex: 1;
    }
  }
  .active{
    color: green;
  }
  .config{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
